<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:cc="http://java.sun.com/jsf/composite"
	xmlns:hmrList="http://java.sun.com/jsf/composite/list"	
	xmlns:hmrTable="http://java.sun.com/jsf/composite/table"	>

<cc:interface>
	<cc:attribute name="handler"				type="com.hemerasolutions.v2trainer.component.interfaces.detail.ExerciseDetailsCompInterface" required="true"/>
	<cc:attribute name="update"					type="java.lang.String"	default="" required="false"/>
	<cc:attribute name="oncomplete"				type="java.lang.String" default="" required="false"/>
	<cc:attribute name="oncancelclick"			type="java.lang.String" default="" required="false"/>
	<cc:attribute name="intensitySummary"		type="java.lang.Boolean" default="false" required="false" />
	<cc:attribute name="editable"				type="java.lang.Boolean" default="false" required="false" />

</cc:interface>

<cc:implementation>
	<span id="#{cc.clientId}" >
		<p:tabView id="tabExercise" rendered="#{cc.attrs.handler.exercise != null}">
			<p:tab title="#{msgs.BasicData} - #{msgs.Version}: #{cc.attrs.handler.exercise.version}">
				<h:panelGrid  columns="2" cellpadding="2" columnClasses="top-align,top-align" style="border:thin 1px" > 
					<h:column>
						<h:form id="exerciseForm" prependId="false" >
							<div style="width:450px">
								<h:panelGrid columns="2" cellpadding="2" style="width:400px" > 
						            <h:outputLabel value="#{msgs.Name} :" for="exerciseName" />
						            <p:inputText id="exerciseName"     value="#{cc.attrs.handler.exercise.name}" maxlength ="20" size="20" 
						            	required="true" requiredMessage="#{msgs.ExerciseNameObligatory}" disabled="#{!cc.attrs.editable}" />
												
									<h:outputLabel value="#{msgs.Description} :" for="exerciseDescription" />
									<p:inputTextarea id="exerciseDescription" rows="4" cols="50"
										counter="counter" maxlength="180"
										counterTemplate="{0} #{msgs.CharsRemaining}" autoResize="false"
										value="#{ cc.attrs.handler.exercise.description}" disabled="#{!cc.attrs.editable}" />
									<p:spacer/>
									<h:outputText id="counter" />
		
						            <h:outputLabel value="#{msgs.Technical} :" for="exerciseTechnical" />
									<p:selectBooleanCheckbox  id="exerciseTechnical" value="#{cc.attrs.handler.exercise.technical}" disabled="#{!cc.attrs.editable}" />  
		
						            <h:outputLabel value="#{msgs.ModalityDefault} :" for="modalityDefault" />
									<p:selectBooleanCheckbox  id="modalityDefault" value="#{cc.attrs.handler.exercise.defaultExercise}" disabled="#{!cc.attrs.editable}" />  
						            
									<h:outputLabel 	value="#{msgs.Executions} :"		for="exerciseExecutions"  />
								    <p:selectCheckboxMenu id="exerciseExecutions" value="#{cc.attrs.handler.exercise.executions}" 
								    	label="#{msgs.ExecutionsTypes}"  filter="true" panelStyle="width:220px" converter="#{genericConverter}" disabled="#{!cc.attrs.editable}">
										<f:attribute name="collectionType" value="java.util.ArrayList" />
								        <f:selectItems value="#{cc.attrs.handler.modality.executions}" var="execution" itemLabel="#{msgs[execution.name]}" itemValue="#{execution}" />
								    	<p:ajax event="toggleSelect" listener="#{cc.attrs.handler.changeAllExerciseExecutions}"  />
								    </p:selectCheckboxMenu>
		 						</h:panelGrid>
							</div>
							<div align="left" style="position: absolute;left: 0px; bottom: 0px" > 
								<p:commandButton  value="#{msgs.Save}" 		action="#{cc.attrs.handler.saveExercise}" 	process="@form"	
									update="#{cc.attrs.update}" oncomplete="#{cc.attrs.oncomplete}"	icon="ui-icon-disk" rendered="#{cc.attrs.editable}" />
								<p:spacer width="50px"/>
								<p:commandButton  value="#{msgs.Cancel}"	actionListener="#{cc.attrs.handler.cancelChange}"	
									icon="ui-icon-cancel" oncomplete="#{cc.attrs.oncancelclick}" rendered="#{cc.attrs.editable}"/>
							</div>
						</h:form>
					</h:column>
					<h:column>
						<p:accordionPanel id="multimedia"  style="margin-left:50px;width:700px" >
							<p:tab title="#{msgs.ExercisePhotos}"  >
								<hmrList:photosList photosHandler="#{cc.attrs.handler.photosListHandler}" editable="#{cc.attrs.editable}" />
							</p:tab>
							<p:tab title="#{msgs.ExerciseVideos}" >
								<hmrList:videosList videosHandler="#{cc.attrs.handler.videosListHandler}" editable="#{cc.attrs.editable}"  />
							</p:tab>
							<p:tab title="#{msgs.Muscles}" >
								<h:form id="muscleForm" prependId="false" >
									<p:dataTable id="musclesTable" value="#{cc.attrs.handler.exercise.exerciseMuscles}" var="exerciseMuscle"  style="width:420px"
										 paginator="true"  paginatorAlwaysVisible="false"  paginatorPosition="bottom" rows="5" emptyMessage="#{msgs.NoResults}">
										<p:columnGroup type="header">  
											<p:row>
												<p:column colspan="1" styleClass="ui-table-button-row">
													<f:facet name="header">
														<p:commandButton title="#{msgs.Add}" process="@this"  oncomplete="wmuscleDialog_#{cc.id}.show()"	 icon="ui-icon-plus" styleClass="ui-table-button" disabled="#{!cc.attrs.editable}">
															<f:setPropertyActionListener target="#{cc.attrs.handler.selBodyRegion}" value="#{null}"/>
															<f:setPropertyActionListener target="#{cc.attrs.handler.selMuscleGroup}" value="#{null}"/>
															<f:setPropertyActionListener target="#{cc.attrs.handler.selMuscle}" value="#{null}"/>
														</p:commandButton>
													</f:facet>
												</p:column>
												<p:column	colspan="4">
													<f:facet name="header">
														<h:outputText value="#{msgs.Name}"/>
													</f:facet>
												</p:column>
												<p:column	colspan="1">
													<f:facet name="header">
														<h:outputText value="#{msgs.MuscleGroup}"/>
													</f:facet>
												</p:column>
												<p:column	colspan="1">
													<f:facet name="header">
														<h:outputText value="#{msgs.BodyRegion}"/>
													</f:facet>
												</p:column>
												<p:column	colspan="1">
													<f:facet name="header">
														<h:outputText value="#{msgs.Focus}"/>
													</f:facet>
												</p:column>
											</p:row>	
										</p:columnGroup>
										<p:column colspan="3" headerText="#{msgs.Name}" style="min-width:100px;max-width:100px">
											<h:outputText value="#{msgs[exerciseMuscle.muscle.name]}" />
										</p:column>
										<p:column colspan="1" styleClass="ui-widget-header ui-table-button-row"  >
											<p:commandButton title="#{msgs.View}" process="@this" oncomplete="wviewMuscle_#{cc.id}.show()"  icon="ui-icon-search"  styleClass="ui-table-button" update=":#{cc.clientId}:viewMuscle">
												<f:setPropertyActionListener target="#{cc.attrs.handler.muscle}" value="#{exerciseMuscle.muscle}"/>
											</p:commandButton>
										</p:column>
										<p:column colspan="1" styleClass="ui-widget-header ui-table-button-row" >
											<p:commandButton title="#{msgs.Delete}" action="#{cc.attrs.handler.deleteMuscle}" process="@this" update="musclesTable" icon="ui-icon-trash" disabled="#{!cc.attrs.editable}" styleClass="ui-table-button">
												<f:setPropertyActionListener target="#{cc.attrs.handler.exerciseMuscle}" 	 value="#{exerciseMuscle}"/>  
											</p:commandButton>
										</p:column>		
										<p:column colspan="1" headerText="#{msgs.MuscleGroup}" style="min-width:100px;max-width:100px" >
											<h:outputText value="#{msgs[exerciseMuscle.muscle.muscleGroup.name]}" />
										</p:column>
										<p:column colspan="1" headerText="#{msgs.BodyRegion}"  style="min-width:100px;max-width:100px">
											<h:outputText value="#{msgs[exerciseMuscle.muscle.muscleGroup.bodyRegion.name]}" />
										</p:column>
										<p:column colspan="1" headerText="#{msgs.Focus}"  style="min-width:100px;max-width:100px">
											<h:outputText value="#{msgs.Primary}" 	rendered="#{exerciseMuscle.primaryMuscle}" />
											<h:outputText value="#{msgs.Secundary}" rendered="#{!exerciseMuscle.primaryMuscle}"/>
										</p:column>
										
									</p:dataTable>	
								</h:form>
							</p:tab>
							<p:tab title="#{msgs.NecessaryEquipments}">
								<div style="min-width:300px;max-width:600px">
			  							<hmrTable:equipTable handler="#{cc.attrs.handler.equipmentTable}" editable="#{cc.attrs.editable}" />
								</div>
							</p:tab>
						</p:accordionPanel>
					</h:column>
				</h:panelGrid>			
			</p:tab>
			<c:if test="#{cc.attrs.intensitySummary}">
				<p:tab title="#{msgs.IntensityZones}" >
					<hmrList:intensityZoneList handler="#{cc.attrs.handler.izList}" editable="false" />
				</p:tab>
			</c:if>
		</p:tabView>


	<p:dialog id="muscleDialog" header="#{msgs.SelectMuscle}" modal="true" widgetVar="wmuscleDialog_#{cc.id}" appendTo="@(body)" dynamic="true"> 
		<h:form id="formMuscle" prependId="false">
			<script type="text/javascript">
			    function handleDialogSubmit(xhr, status, args) {
			        if (args.validationFailed) {
			        	wmuscleDialog_#{cc.id}.show();
			        } else {
			        	wmuscleDialog_#{cc.id}.hide();
			        }
			    }
			 </script>  
		    <h:panelGrid columns="2">
		    	<h:column>
				    <h:panelGrid columns="2">
						<h:outputText value="#{msgs.BodyRegion}: "  />
			 			<p:selectOneMenu id="soBodyRegion" value="#{cc.attrs.handler.selBodyRegion}" converter="#{genericConverter}" style="min-width:150px"
			 				required="true" requiredMessage="#{msgs.BodyRegionObligatory}"  >
							<f:selectItem  itemLabel="#{msgs.BodyRegion}"  value="#{null}" noSelectionOption="true" />
				          	<f:selectItems value="#{cc.attrs.handler.bodyRegions}" var="bodyRegion" itemLabel="#{msgs[bodyRegion.name]}" itemValue="#{bodyRegion}" />
							<p:ajax  listener="#{cc.attrs.handler.handleBodyRegionChange}" update="soMuscleGroup,soMuscle,musclePhoto"/>
				        </p:selectOneMenu>
					
						<h:outputText value="#{msgs.MuscleGroup}: "  />
			 			<p:selectOneMenu id="soMuscleGroup" value="#{cc.attrs.handler.selMuscleGroup}" converter="#{genericConverter}" style="min-width:150px"
			 				required="true" requiredMessage="#{msgs.MuscleGroupObligatory}" >
							<f:selectItem  itemLabel="#{msgs.MuscleGroup}"  value="#{null}" noSelectionOption="true" />
				          	<f:selectItems value="#{cc.attrs.handler.muscleGroups}" var="muscleGroup" itemLabel="#{msgs[muscleGroup.name]}" itemValue="#{muscleGroup}" />
							<p:ajax listener="#{cc.attrs.handler.handleMuscleGroupChange}" update="soMuscle,musclePhoto"/>
				        </p:selectOneMenu>
			
						<h:outputText value="#{msgs.Muscle}: " />
			 			<p:selectOneMenu id="soMuscle" value="#{cc.attrs.handler.selMuscle}" converter="#{genericConverter}" style="min-width:150px"
			 				required="true" requiredMessage="#{msgs.MuscleObligatory}" >
							<f:selectItem  itemLabel="#{msgs.Muscle}"  value="#{null}" />
				          	<f:selectItems value="#{cc.attrs.handler.muscles}" var="muscle" itemLabel="#{msgs[muscle.name]}" itemValue="#{muscle}" />
				        </p:selectOneMenu>

						<h:outputText value="#{msgs.Focus}: " /> 
						<p:selectBooleanCheckbox value="#{cc.attrs.handler.musclePrimary}"/>

				    </h:panelGrid>
		    	</h:column>
		    	<h:column>
		    		<p:graphicImage id="musclePhoto" value="/images/body_map.gif" width="220"  height="148" />
		    	</h:column>
		    </h:panelGrid>

			<p:commandButton value="#{msgs.Add}" action="#{cc.attrs.handler.addMuscle}" update=":growl,:#{cc.clientId}:tabExercise:multimedia:muscleForm:musclesTable" oncomplete="handleDialogSubmit(xhr, status, args);"/>
			<p:commandButton type="button" value="#{msgs.Close}" onclick="wmuscleDialog_#{cc.id}.hide();"/>
		</h:form>
	</p:dialog>
	
	<p:dialog id="viewMuscle" modal="true" header="#{cc.attrs.handler.muscle.name}" widgetVar="wviewMuscle_#{cc.id}" appendTo="@(body)">
   		<p:graphicImage value="/images/body_map.gif" width="220"  height="148" />		
	</p:dialog>

	<p:confirmDialog message="#{msgs.DoYouWantToCreateANewVersionOfThisExerciseForChanges}" appendTo="@(body)" widgetVar="wNewExerciseVersionQuestion"  >
		
		<p:commandButton value="#{msgs.Yes}" actionListener="#{cc.attrs.handler.newExerciseVersion}"	update=":#{cc.clientId}" oncomplete="PF('wNewExerciseVersionQuestion').hide();"/>
		<p:commandButton value="#{msgs.No}" onclick="PF('wNewExerciseVersionQuestion').hide();" type="button" />	
	
	</p:confirmDialog>


	</span>
</cc:implementation>
</html>	